import React, { Fragment } from 'react';
import PropTypes from 'prop-types';

import QueueAnim from 'rc-queue-anim';

import { Form, Row, Col, Card, Input, Icon, Select, DatePicker, Button } from 'antd';

import MyIcon from '@/components/MyIcon';

import styles from './index.less';

function TableForm({ expandForm, data, form, onSubmit, onReset, onToggle }) {

  const result = expandForm ? data : data.slice(0, 2);

  return (
    <Form onSubmit={onSubmit} layout="inline" className={styles.tableListForm}>
    	<QueueAnim delay={300} gutter={{ md: 8, lg: 24, xl: 48 }} component={Row}>
        {
          result.map(item => {

            return (

      	      <Col md={8} sm={24} key={item.field}>
                <Form.Item label={item.label}>
                  {form.getFieldDecorator(item.field)(

                    item.component === 'Select'
                    ?
                    <Select style={{ width: '100%' }} {...item.props}>
                      {
                        item.children && Object.keys(item.children).map(i => (
                            <Select.Option value={String(i)} key={i}>{item.children[i]}</Select.Option>
                          )
                        )
                      }
                    </Select>
                    :
                    item.component === 'DatePicker'
                    ?
                    <DatePicker style={{ width: '100%' }} {...item.props} />
                    :
                    <Input {...item.props} />
                  
                  )}
                </Form.Item>
              </Col>

            )

          })
        }

        <Col md={8} sm={24} key="handle" style={{marginBottom: 24}}>
          <Button type="primary" icon="search" htmlType="submit">查询</Button>
          <Button style={{ marginRight: 8, marginLeft: 8 }} onClick={onReset}><MyIcon type="icon-reset" />重置</Button>
          {
            expandForm 
            ?
            <a onClick={onToggle}>
              收起 <Icon type="up" />
            </a>
            :
            <a onClick={onToggle}>
              展开 <Icon type="down" />
            </a>
          }
        </Col>

	    </QueueAnim>
    </Form>
  );
}

TableForm.propTypes = {
  expandForm: PropTypes.bool,
  data: PropTypes.array,
  form: PropTypes.object,
  onSubmit: PropTypes.func,
  onReset: PropTypes.func,
  onToggle: PropTypes.func,
};

TableForm.defaultProps = {
  expandForm: false,
  data: [],
  form: {},
  onSubmit() {},
  onReset() {},
  onToggle() {},
};

export default TableForm;